<template>
  <div class="solution">
    <div class="solution_topic">
      <div class="solution_img">
        <img :src="userInfo.avatar" />
        <span>{{solutionDetail.solutionTitle}}</span>
      </div>
      <div class="solution_topics">
        <span>{{userInfo.username}}</span>
        <span>{{solutionDetail.createTime | formatDate}}</span>
        <span>{{solutionDetail.solutionNumber}}</span>
        <span>{{solutionDetail.solutionTag}}</span>
      </div>
      <div class="solution_content">{{solutionDetail.solutionContext}}</div>
      <hr />
      <p class="critic">xxx条评论</p>
      <div class="solution_text">
        <el-input
          type="textarea"
          readonly="true"
          :rows="10"
          v-model="textarea"
        >
        </el-input>
      </div>
   <el-button class="solution_btn">评论</el-button>
    </div>
    <div class="solution_people">
      <div class="solution_people_comment">
        <div class="solution_photo">
          <img :src="userInfo.avatar" />
          <span>{{userInfo.username}}</span>
          <span class="solution_time">{{userInfo.createTime | formatDate}}</span>
        </div>
        <div class="solution_details">内容</div>
        <div class="solution_detail">
          <el-button class="solution_signs"><p>点赞</p></el-button>
          <el-button  class="solution_signs"><p>回复数量</p></el-button>
          <el-button  class="solution_signs"><p>回复</p></el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "@/assets/css/solution.css";
import { formatDate } from "@/utils/date";

//  1、自己写前端的时候先定义数据 后端会给你
const defaultSolution = {
  id: 1,
  solutionTitle: "通过哈希表计算",
  solutionContext: 
  "class Solution {"+
    "public int[] twoSum(int[] nums, int target) {"+
        "Map<Integer, Integer> hashtable = new HashMap<Integer, Integer>();"+
        "for (int i = 0; i < nums.length; ++i) {"+
            "if (hashtable.containsKey(target - nums[i])) {"+
                "return new int[]{hashtable.get(target - nums[i]), i};"+
            "}"+
            "hashtable.put(nums[i], i);"+
        "}"+
        "return new int[0];"+
    "}"+
"}",
  createTime: "2022-02-22 02:28:32",
  updateTime: "2022-02-22 02:28:32",
  solutionStatus: 1,
  solutionTag: "哈希表",
  solutionNumber: 0,
  belongUsername: "丫丫",
  userId: 5,
  subjectId: 1,
};
const vueUserInfo = {
  id: 1,
  username: "丫丫", //账号
  nickname: "小丫丫", //别名
  password: "1234567890",
  avatar: "https://yaling.oss-cn-shenzhen.aliyuncs.com/20211121/4.jpg",
  email: "19880030153@qq.com",
  phone: "19880030153",
  sex: 0,
};
export default {
  name: "solution",
  data() {
    return {
      textarea: "",
      // 2、定义data的数据命名规则  列表就list结尾，详情页面就detail结尾 或者Info
      solutionDetail: Object.assign({},defaultSolution), //定义为一个对象
      userInfo: Object.assign({},vueUserInfo)
    };
  },
  // 4、调用数据  因为要先拿到数据才能渲染
  created(){
    this.getSolutionInfo()
  },
  filters: {
    formatDate(time) {
      if (time == null || time === "") {
        return "N/A";
      }
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd");
    },
  },
  methods:{
    // 3、获取数据方法 后端请求获取，但是这里先模拟
    getSolutionInfo(){
      this.solutionDetail = defaultSolution;
      this.userInfo = vueUserInfo
    }
  }
};
</script>

<style></style>
